{% extends "layout.html" %} {% block title %}仪表盘 - 金融数据平台{% endblock %}
{% block content %}
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-primary text-white">
        <h4 class="mb-0">
          <i class="fas fa-tachometer-alt me-2"></i>数据仪表盘
        </h4>
      </div>
      <div class="card-body">
        <ul class="nav nav-tabs" id="dashboardTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button
              class="nav-link active"
              id="market-tab"
              data-bs-toggle="tab"
              data-bs-target="#market"
              type="button"
              role="tab"
              aria-controls="market"
              aria-selected="true"
            >
              <i class="fas fa-chart-line me-1"></i>市场数据
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link"
              id="macro-tab"
              data-bs-toggle="tab"
              data-bs-target="#macro"
              type="button"
              role="tab"
              aria-controls="macro"
              aria-selected="false"
            >
              <i class="fas fa-globe me-1"></i>宏观经济
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link"
              id="task-tab"
              data-bs-toggle="tab"
              data-bs-target="#task"
              type="button"
              role="tab"
              aria-controls="task"
              aria-selected="false"
            >
              <i class="fas fa-tasks me-1"></i>任务监控
            </button>
          </li>
        </ul>
        <div class="tab-content p-3" id="dashboardTabsContent">
          <div
            class="tab-pane fade show active"
            id="market"
            role="tabpanel"
            aria-labelledby="market-tab"
          >
            <div class="ratio ratio-16x9" style="min-height: 600px">
              <iframe modules="/dash/market/"></iframe>
            </div>
          </div>
          <div
            class="tab-pane fade"
            id="macro"
            role="tabpanel"
            aria-labelledby="macro-tab"
          >
            <div class="ratio ratio-16x9" style="min-height: 600px">
              <iframe modules="/dash/macro/"></iframe>
            </div>
          </div>
          <div
            class="tab-pane fade"
            id="task"
            role="tabpanel"
            aria-labelledby="task-tab"
          >
            <div class="ratio ratio-16x9" style="min-height: 600px">
              <iframe modules="/dash/tasks/"></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-6 mb-4">
    <div class="card">
      <div class="card-header bg-info text-white">
        <h5 class="mb-0"><i class="fas fa-database me-2"></i>数据收集统计</h5>
      </div>
      <div class="card-body">
        <canvas id="dataCollectionChart"></canvas>
      </div>
    </div>
  </div>
  <div class="col-md-6 mb-4">
    <div class="card">
      <div class="card-header bg-success text-white">
        <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>系统状态</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-6 mb-3">
            <div class="card bg-light">
              <div class="card-body text-center">
                <h3 class="text-primary" id="totalSecurities">--</h3>
                <p class="mb-0">证券数量</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="card bg-light">
              <div class="card-body text-center">
                <h3 class="text-success" id="totalQuotes">--</h3>
                <p class="mb-0">行情记录</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="card bg-light">
              <div class="card-body text-center">
                <h3 class="text-info" id="totalTasks">--</h3>
                <p class="mb-0">任务数量</p>
              </div>
            </div>
          </div>
          <div class="col-md-6 mb-3">
            <div class="card bg-light">
              <div class="card-body text-center">
                <h3 class="text-warning" id="runningTasks">--</h3>
                <p class="mb-0">运行中任务</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script modules="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // 当页面加载完成后获取统计数据
  document.addEventListener("DOMContentLoaded", function () {
    // 模拟数据，实际应用中应该通过API获取
    const securityTypes = ["股票", "期货", "加密货币", "ETF", "基金"];
    const securityCounts = [2345, 426, 187, 352, 1067];

    // 创建数据收集统计图表
    const ctx = document.getElementById("dataCollectionChart").getContext("2d");
    const dataCollectionChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: securityTypes,
        datasets: [
          {
            label: "数据项数量",
            data: securityCounts,
            backgroundColor: [
              "rgba(255, 99, 132, 0.5)",
              "rgba(54, 162, 235, 0.5)",
              "rgba(255, 206, 86, 0.5)",
              "rgba(75, 192, 192, 0.5)",
              "rgba(153, 102, 255, 0.5)",
            ],
            borderColor: [
              "rgba(255, 99, 132, 1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
            ],
            borderWidth: 1,
          },
        ],
      },
      options: {
        responsive: true,
        plugins: {
          legend: {
            position: "top",
          },
          title: {
            display: true,
            text: "各类型证券数据统计",
          },
        },
      },
    });

    // 更新统计卡片数据
    document.getElementById("totalSecurities").textContent = "4,377";
    document.getElementById("totalQuotes").textContent = "17.2M";
    document.getElementById("totalTasks").textContent = "5,284";
    document.getElementById("runningTasks").textContent = "8";

    // 实际应用中，应该通过API获取实时数据
    // fetch('/api/statistics').then(response => response.json()).then(data => {
    //     document.getElementById('totalSecurities').textContent = data.totalSecurities.toLocaleString();
    //     document.getElementById('totalQuotes').textContent = data.totalQuotes.toLocaleString();
    //     document.getElementById('totalTasks').textContent = data.totalTasks.toLocaleString();
    //     document.getElementById('runningTasks').textContent = data.runningTasks.toLocaleString();
    // });
  });
</script>
{% endblock %}
